<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>

<script>
import getJson from '../../assets/data.json'
export default {
  data() {
    return {}
  },
  mounted() {
    // echarts图标的注册
    let myChart = this.$echarts.init(document.getElementById('main'))
    // 地图的注册
    this.$echarts.registerMap('china', getJson) //注册地图类型的时候必须有geo组件或者图表类型
    console.log(getJson)
    let option = {
      backgroundColor: 'rgb(121,145,209)',
      geo: {
        map: 'china',
        aspectScale: 0.75, //scale地图的长宽比
        // 每一块板块的颜色
        itemStyle: {
          // 正常版
          normal: {
            // 区域颜色
            areaColor: {
              // 类型是镜像渐变
              type: 'radisl',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: '#09132c', // 在0%处的颜色
                },
                {
                  offset: 1,
                  color: '#274d68', // 在100%处的颜色
                },
              ],
              globalCoord: true,
            },
            // 使得地图具有层级结构
            shadowColor: 'rgb(58,115,192)',
            shadowOffsetX: 10,
            shadowOffsetY: 10,
          },
        },
        zoom: 1.1, //缩放比
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              opacity: 0.8,
            },
          },
        ],
      },
      series: [
        {
          // 配置地图的相关参数，这个对象是相关于地图图表的设置
          type: 'map',
          zoom: 1.1,
          map: 'china',
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#1de9b6',
              },
            },
            emphasis: {
              textStyle: {
                color: 'rgb(183,185,14)',
              },
            },
          },
          itemStyle: {
            // 正常版
            normal: {
              backgroundColor: 'rgb(147,235,248)',
              borderWidth: 1,
              // 区域颜色
              areaColor: {
                // 类型是镜像渐变
                type: 'radisl',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(31,54,150)', // 在0%处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(89,128,142)', // 在100%处的颜色
                  },
                ],
                globalCoord: true,
              },
            },
            // 设置其高亮的效果
            emphasis: {
              areaColor: 'rgb(46,229,206)',
              borderWidth: 0.1,
            },
          },
        },
      ],
    }
    myChart.setOption(option)
  },
}
</script>

<style lang="scss">
.map-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
  }
}
</style>
